<template>
  <div class="all">
    <div class="managerScenic">
      <div class="managerHeader">景点管理</div>
      <div class="managerSreach">
        <el-input
          v-model="LikeScenicName.input"
          style="width: 200px"
          placeholder="请输入景点关键字"
        ></el-input>
        <el-button
          type="primary"
          style="margin-left: 20px"
          plain
          @click="handleSearch"
          >搜索</el-button
        >
        <el-button
          type="primary"
          style="margin-left: 420px"
          @click="addScenicSpot"
          >新增</el-button
        >
      </div>
      <div>
        <hr
          style="margin-top: 20px; margin-left: 100px"
          width="800"
          color="#CECFD0"
          size="1"
        />
      </div>
      <div class="managerTable">
        <el-table
          :data="
            tableData.slice(
              (formInLine.currentPage - 1) * formInLine.pageSize,
              formInLine.currentPage * formInLine.pageSize
            )
          "
          style="width: 100%"
          :row-class-name="tableRowClassName"
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }"
        >
          <el-table-column prop="scenicId" label="景点编号" width="180">
          </el-table-column>
          <el-table-column prop="scenicName" label="景点名称" width="180">
          </el-table-column>
          <el-table-column prop="scenicType" label="景点类型">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="managerPage" v-if="pageshow">
        <el-pagination
          :page-size="formInLine.pageSize"
          @current-change="handleCurrentChange"
          background
          layout="prev, pager, next"
          :total="tableData.length"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { findAllScenicspot } from "@/api/scenic";
import { findAllScenicspotByKeyword } from "@/api/scenic";
import { deleteScenicspot } from "@/api/scenic";

export default {
  created() {
    this.findAllScenicspot(1);
  },

  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    handleCurrentChange(cpage) {
      this.formInLine.currentPage = cpage;
    },
    findAllScenicspot(cpage) {
      this.formInLine.currentPage = cpage;
      findAllScenicspot(this.formInLine).then((res) => {
        if (res.code == 200) {
          console.log(res);
          this.tableData = res.data;
          console.log(this.tableData);
        }
      });
    },
    handleSearch() {
      findAllScenicspotByKeyword(this.LikeScenicName).then((res) => {
        console.log(this.LikeScenicName);
        if (res.code == 200) {
          console.log(res);
          this.tableData = res.data;
          this.formInLine.pageSize = 7;
          this.formInLine.currentPage = 1;
          this.pageshow = false; //让分页隐藏
          this.$nextTick(() => {
            //重新渲染分页
            this.pageshow = true;
          });
          console.log(this.formInLine.pageSize);
        }
      });
    },
    addScenicSpot() {
      this.$router.push({
        name: "addScenic",
      });
    },

    handleDelete(index, row) {
      deleteScenicspot(row.scenicId).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
          findAllScenicspot(this.formInLine).then((res) => {
            if (res.code == 200) {
              this.tableData = res.data;

              const totalPage = Math.ceil(
                this.tableData.length / this.formInLine.pageSize
              ); // 总页数

              this.formInLine.currentPage =
                this.formInLine.currentPage > totalPage
                  ? totalPage
                  : this.formInLine.currentPage;

              this.formInLine.currentPage =
                this.formInLine.currentPage < 1
                  ? 1
                  : this.formInLine.currentPage;
            }
          });
        }
      });
    },
    handleEdit(index, row) {
      this.$router.push({
        name: "updateScenic",
        query: {
          scenicId: row.scenicId,
          scenicName: row.scenicName,
          scenicType: row.scenicType,
          scenicDescription: row.scenicDescription,
          scenicCoverUrl: row.scenicCoverUrl,
          strategyUrl: row.strategyUrl,
          createBy: row.createBy,
        },
      });
    },
  },

  data() {
    return {
      pageshow: true,
      LikeScenicName: {
        input: "",
      },

      tableData: [
        {
          scenicId: "",
          scenicName: "",
          scenicType: "",
        },
      ],

      formInLine: {
        pageSize: 7,
        currentPage: 1,
      },
    };
  },
};
</script>
<style scoped>
.all {
  display: flex;
  justify-content: center;
}
.managerScenic {
  display: flex;
  flex-direction: column;
  width: 67%;
  height: 650px;
  /* background-color: red; */
  /* margin-left: 145px; */
  justify-content: space-center;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.managerHeader {
  margin-left: 20px;
  margin-top: 30px;
  font-weight: 700;
  font-size: 18px;
  color: rgb(64, 158, 255);
}
.managerSreach {
  display: flex;
  margin-left: 100px;
  margin-top: 40px;
}
.managerTable {
  margin-left: 100px;

  width: 800px;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.managerPage {
  display: flex;
  margin-top: 20px;
  justify-content: center;
}
</style>